<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/base.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 13px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="baseFunctionDemo">
	<!-- API区 -->
	 <div title='API' tabid='tab1'><br />
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#baseApi')">1.IGrid基础属性配置表</a></h2>
		<div style="display:none" id="baseApi">
			<form class="init ccay-form  longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.base.openDemo('tab2');"><u>点击查看Demo</u></a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="$.fn.igrid(options, datas)"></samp>	
						<span class="ccay-form-input">
							通过options配置项初始化igrid，示例var options={...}igrid的参数配置，如下表。
							<br>datas参数是igrid绑定的静态数据源，示例var datas=[{},{}...对象集]，若在options中配置了数据源，则可不用传入该参数。
							<h6>示例：$("#id").igrid(options);</h6>或者 <br><h6>$("#id").igrid(options, datas);</h6> // 初始化igrid，其id为装载igrid的div的id
							<br>options参数设置如下：
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
							 	<ul>
	                            	<li class="ccay-form-row">
	                            		<samp><h3>基础属性</h3></samp>
	                            		<span class="ccay-form-input"><h3>描述</h3></span>
	                            	</li>
	                            	<li class="ccay-form-row">
										<samp class="i18n" i18nKey="width"></samp>
										<span class="ccay-form-input">{Number}	设置igrid的宽度，默认为100%</span>
									</li>
	                            	<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="height"></samp>							    
										<span class="ccay-form-input">{Number} 设置igrid的内容区域高度。<span class="showClew">不设置高度，则根据查询出的数据自适应高度</span></span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="minHeight"></samp>							    
										<span class="ccay-form-input">{Number} 设置igrid的内容区域的最小高度</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="maxHeight"></samp>							    
										<span class="ccay-form-input">{Number} 设置igrid的内容区域最大高度</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="cssName"></samp>
										<span class="ccay-form-input">{String} 设置igrid的样式</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="percentWidth"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的宽度是否进行百分比设置，默认为false</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="wrap"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的单元格内容是否进行折行显示，默认为false;<br/>在百分比设置下，即percentWidth:true，wrap默认为true，即折行显示</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="colsort"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的列头是否允许拖动，默认true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="wrapHead"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的表头内容是否进行折行显示，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="headTip"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的表头是否进行Tip显示，默认为false</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="allowFreezen"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否允许开启冻结列，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="showColumnIcon"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的表头是否显示默认图标，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="customSetting"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否设置个性化，默认为false</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="showSeq"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的列是否显示序号，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="serialSeq"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的列是否显示连续序号，默认为true。<span class="showClew">当showSeq:true时有效</span></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="autoLoad"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否进行自动加载，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="autoScroll"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid翻页时竖向滚动条是否返回顶部，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="columns"></samp>
										<span class="ccay-form-input">{Array} igrid的列设置，针对列配置各种参数，比如： width、field、header等等，具体配置将在下面《IGrid显示数据列columns的配置属性表》中描述
										<h5><a onclick="Ccay.Common.toggle(this,'#baseApi');Ccay.Common.toggle(this,'#columnsApi');">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="ajax"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的ajax请求参数，比如：url等等</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="rowAttr"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的行属性</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="rowTmplCode"></samp>
										<span class="ccay-form-input">{Array} 设置igrid行数据显示模板</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="tmpl"></samp>
										<span class="ccay-form-input">{Object/String} 设置igrid数据显示模板</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fzNum"></samp>
										<span class="ccay-form-input">{Number} 设置冻结列的数量</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="handler"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的内置事件委托</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="cacheData"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否缓存数据</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="cacheKey"></samp>
										<span class="ccay-form-input">{Array} 设置缓存key值</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="allowSort"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid列是否允许排序，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="remoteSort"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid列是否为服务端排序，默认为false。<span class="showClew">当allowSort:true时有效</span></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="sort"></samp>
										<span class="ccay-form-input">{String} 设置igrid的排序类型</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="allowResize"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid的列是否允许大小设置，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="customHead"></samp>
										<span class="ccay-form-input">{String} 设置igrid进行自定义表头的div的id值。
											<span class="showClew">其值前加#号</span>
											<h5><a onclick="Ccay.example.ui.igird.base.openDemo('tab5');">点击查看Demo</a></h5>
										</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="selectMode"></samp>
										<span class="ccay-form-input">{String} 设置igrid选择模式，单选还是多选</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="selectField"></samp>
										<span class="ccay-form-input">{String} 设置igrid选择的数据所要返回的字段</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="showPager"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否显示分页信息，默认为true</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="pagerOp"></samp>
										<span class="ccay-form-input">{Object} 设置igrid分页的属性。<span class="showClew">当showPager:true时有效</span>，具体配置将在《IGrid分页功能》的API中描述
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/search.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="_scrollOp"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的滚动分页属性。<span class="showClew">当lazyLoad:true时有效</span>，具体配置将在《IGrid分页功能》的API中描述
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/search.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="lazyLoad"></samp>
										<span class="ccay-form-input">{Object} 设置igrid是否进行延迟加载，默认为false</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="editPermission"></samp>
										<span class="ccay-form-input">{String} 设置igrid的编辑权限<br><h6>示例：editPermission:"Service$HtmlArea$create"</h6></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="rowEdit"></samp>
										<span class="ccay-form-input">{Object} 设置igrid是否开启行编辑模式，默认为false。<span class="showClew">当editMode:true时有效</span>，具体示例将在《IGrid编辑器功能->IGrid编辑模式》中显示
											<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/editorFunction.html')">点击查看Demo</a></h5>
										</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="editMode"></samp>
										<span class="ccay-form-input">{Object} 设置igrid是否开启编辑模式：true、false、"insert"三种，默认为false。<span class="showClew">当editPermission有编辑权限时有效</span>，具体示例将在《IGrid编辑器功能->IGrid编辑模式》中显示
											<br>true：开启编辑模式<br>false：关闭编辑模式<br>"insert"：新增编辑模式
											<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/editorFunction.html')">点击查看Demo</a></h5>
										</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="operation"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的操作配置项，比如：search、insert、del、save等等，具体配置将在《IGrid操作功能》的API中描述
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/operation.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="rowRender"></samp>
										<span class="ccay-form-input">{String} 设置igrid的行渲染类型："rowSpan"、"group"、"tree"三种。具体示例将在《IGrid行渲染功能》中显示
											<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/rowRenderFunction.html')">点击查看Demo</a></h5>
										</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="rowRenderOp"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的行渲染的属性设置。<span class="showClew">当rowRender存在时有效</span>，具体配置将在《IGrid行渲染功能》的API中描述
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/rowRenderFunction.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="contextMenu"></samp>
										<span class="ccay-form-input">{Boolean} 设置igrid是否开启上下文菜单按钮
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/menuFunction.html')">点击查看Demo</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="menuOp"></samp>
										<span class="ccay-form-input">{Object} 设置igrid的上下文菜单按钮设置。<span class="showClew">当contextMenu:true时有效</span>，具体配置将在《IGrid上下文菜单功能》的API中描述
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/menuFunction.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="clickRow2Check"></samp>
										<span class="ccay-form-input">{Boolean} 设置是否点击行可勾选当前行数据，默认为false不勾选。
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/base.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="toolPanel"></samp>
										<span class="ccay-form-input">{String} 设置工具栏ID
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/otherFunction.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fullPanel"></samp>
										<span class="ccay-form-input">{String} 设置全屏面板ID
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/otherFunction.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="fullOutTip"></samp>
										<span class="ccay-form-input">{Boolean} 设置全屏模式时，退出浏览器是否进行提示
										<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/otherFunction.html')">点击查看</a></h5></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="showOverflow"></samp>
										<span class="ccay-form-input">{Boolean} 内容超出时才显示Tip，否则不显示。</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="checkRender"></samp>
										<span class="ccay-form-input">根据场景判断是否需要显示选择框。<br/>&nbsp;&nbsp;<h6>示例：{columnType:'select', multi:true, checkRender: "data.birthday"}</h6><br/>根据birthday列是否有数据，来判断是否显示多选框</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="seqHeader"></samp>
										<span class="ccay-form-input">{String} 设置igrid序列的head<br/>&nbsp;&nbsp;<h6>示例：seqHeader:"NO."</h6></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="seqWidth"></samp>
										<span class="ccay-form-input">{String} 设置igrid序列的head宽度<br/>&nbsp;&nbsp;<h6>示例：seqWidth:"10px"或者seqWidth:"10%"</h6></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="showSwitch"></samp>
										<span class="ccay-form-input">{Boolean} 是否显示搜索或筛选切换按钮</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="allowFilter"></samp>
										<span class="ccay-form-input">{Boolean} 是否开启筛选模式</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="switchMode"></samp>
										<span class="ccay-form-input">收索筛选切换按钮<br/>&nbsp;&nbsp;<h6>示例：switchMode:"search"</h6></span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="totalText"></samp>
										<span class="ccay-form-input">设置统计行序号列的文本，仅在统计行存在时可用。</span>
									</li>	
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="weakValid"></samp>
										<span class="ccay-form-input">{Boolean} 是否开启弱验证，默认不开启。开启弱验证，igrid在没有验证通过的时候也可以编辑其它列。(V5R04SP15)<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/validateFunction.html')">点击查看</a>【IGrid内置验证器】</h5></span>
									</li>	
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="noResultI18n"></samp>
										<span class="ccay-form-input">{String} 设置自定义无数据记录显示的提示(国际化key)，不设置则显示默认提示</span>
									</li>				 						
	                            </ul>
							</div>
						</span>
					</li>
				</ul>
			</div>
			</form>
		</div><br />
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#columnsApi')">2.IGrid显示数据列columns的属性配置表</a></h2>
	 	<div style="display:none" id="columnsApi">
	 		<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>属性</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.base.openDemo('tab3');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="width"></samp>
						<span class="ccay-form-input">{Number/String} 设置该列显示的宽度，比如：width:70、width:"70px"、width:"70%"</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="hidden"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否隐藏，默认为false</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="freezeable"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否是冻结列，默认为false</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="headCss"></samp>
						<span class="ccay-form-input">{String} 设置该列列头样式</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="cssName"></samp>
						<span class="ccay-form-input">{String}	设置该列单元格样式，也可设置left、right、center等位置</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="header"></samp>
						<span class="ccay-form-input">{String}	设置该列列头名称</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="headHtml"></samp>
						<span class="ccay-form-input">{String}	设置该列列头模板</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="field"></samp>
						<span class="ccay-form-input">{String}	设置该列对于数据源中的某一列属性的绑定，用于页面显示，其值应为数据对象中的属性名称，示例var datas=[{"name":"Booker", "age":12}, {"name":"Sandy", "age":14}...对象集];<br />
						<h6>columns:[{field: "name"}, {field: "age"}];</h6> // field的值为数据对象的属性名称，则该列将绑定并显示该对象的属性值</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="valueField"></samp>
						<span class="ccay-form-input">{String}	设置该列的值为数据源某一列属性的值，其值应为数据对象中的属性名称。<span class="showClew">若columns不设置valueField属性时，则该列的值为field属性绑定的对象中的属性值</span></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="displayField"></samp>
						<span class="ccay-form-input">{String}	设置该列对于数据源中的某一列属性的绑定，用于页面显示，其值应为数据对象中的属性名称，应用于复杂数据对象，优先级高于field属性</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="type"></samp>
						<span class="ccay-form-input">{String} 设置该列的类型：'bool'、'integer'、'number'、'currency'、'currencystr'(超过15位金额请使用此属性)、'date'、'datetime'、'enum'、'rate'、'ldap'、'lookup'，默认为string类型</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="format"></samp>
						<span class="ccay-form-input">{Object} 数据格式化配置，具体受rendererType属性影响，具体配置将在《IGrid渲染器功能》的API中描述
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/renderFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="content"></samp>
						<span class="ccay-form-input">{String} 设置该列单元格显示的内容</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="attr"></samp>
						<span class="ccay-form-input">{Object} 设置该列的属性</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="headAttr"></samp>
						<span class="ccay-form-input">{Object} 设置该列头的属性</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="inner"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否是内置列</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="sortable"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否允许排序，默认为true</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="sortField"></samp>
						<span class="ccay-form-input">{String} 设置该列的排序字段，只有自定义排序字段时使用，默认使用valueField属性或者field属性</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="sort"></samp>
						<span class="ccay-form-input">{String} 设置igrid初始化时的排序类型：'asc'、'desc'两种，<span class="showClew">在igrid中只有一个列中设置有效</span><br>
						'asc'：igrid初始化时按照该列的升序排序<br>'desc'：igrid初始化时按照该列的降序排序</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="resizable"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否允许改变列大小，默认为true</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="columnType"></samp>
						<span class="ccay-form-input">{String} 设置igrid的内置列类型："select"、"operate"两种
						<br>"select"：该列显示选择框样式，可进行选择功能<br>"operate"：该列显示操作样式，可进行操作功能</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="multi"></samp>
						<span class="ccay-form-input">{Boolean} 设置igrid是否可进行多选列：true、false，默认为false。<span class="showClew">当columnType:'select'时有效</span>
						<br>true：该列显示多选框，<span class="showClew">选中某列之后点击Shift键可进行快捷多选</span><br />false：该列显示单选框</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="btns"></samp>
						<span class="ccay-form-input">{Array} 设置igrid内置列编辑按钮操作的配置，<span class="showClew">当columnType:'operate'时有效</span>，具体配置将在下面《IGrid操作功能》的API中显示
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/operation.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="editable"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否允许编辑，默认为true。<span class="showClew">当editMode:true时有效</span></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="editorOp"></samp>
						<span class="ccay-form-input">{Object} 设置该列编辑器的属性设置，具体配置将在《IGrid编辑器功能》的API中描述 
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/editorFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="editor"></samp>
						<span class="ccay-form-input">{Object} 设置该列进行自定义编辑器，具体配置将在《IGrid编辑器功能》的API中描述 
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/editorFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="valid"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否进行验证，默认为true</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="rule"></samp>
						<span class="ccay-form-input">{Object} 设置该列的验证，具体配置将在《IGrid验证器功能》的API中描述 
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/validateFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="rowSpan"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否进行行合并，<span class="showClew">当rowRender:'rowSpan'时有效</span></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="group"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否进行行分组，<span class="showClew">当rowRender:'group'时有效</span></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="menuable"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否启用上下文菜单按钮，<span class="showClew">当contextMenu:true时有效</span>
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/menuFunction.html')">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="permission"></samp>
						<span class="ccay-form-input">{String} 设置该列的权限，有权限则会显示该列，否则隐藏该列。<br><h6>示例：permission:"Service$HtmlArea$create"</h6></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="editPermission"></samp>
						<span class="ccay-form-input">{String} 设置该列的编辑权限，有权限则可以进行编辑，否则不能编辑。<br><h6>示例：editPermission:"Service$HtmlArea$create"</h6></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="showTip"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否tip显示完整数据</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="rendererType"></samp>
						<span class="ccay-form-input">{String} 设置该列渲染器类型：'bool'、'integer'、'number'、'currency'、'date'、'datetime'、'enum'、'rate'、'ldap'、<br>'lookup'、'longtext'、'ellipsis'、'childRender'，默认为String类型。具体配置将在《IGrid渲染器功能》的API中描述 
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/renderFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="renderer"></samp>
						<span class="ccay-form-input">{Object} 设置该列进行自定义渲染器，具体配置将在《IGrid渲染器功能》的API中显示 
						<h5><a onclick="Ccay.Page.forward('ccay/example/ui/igrid/renderFunction.html')">点击查看</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="totalCount"></samp>
						<span class="ccay-form-input">{Boolean} 设置该列是否进行统计。如果统计，会在尾部自动生成统计行，并且基础属性totalText生效。</span>
					</li>
				</ul>
			</div>
			</form>
	 	</div>
	 </div>
	 
	 <!-- Demo区 -->
	 <div title='基础属性' tabid='tab2'>
	 	<span class="showClew">备注：IGrid基础属性Demo只进行简单的数据展示、显示分页信息、排序、改变列宽以及单元格内容折行显示</span><br /><br />
	 	<div id="iStudent1"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html1'><span class="showClew">&lt;!-- 提供div供igrid进行初始化 --></span>
&lt;div id="igridDemo1">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
//<span class="showClew"> 配置igrid的参数</span>
var igridOption = {
	//<span class="showClew"> 设置igrid的高度，若不设置，则显示查询出来的所有数据</span>
	height: 332, 
	
	//<span class="showClew"> 设置igrid列允许排序，默认true</span>
	allowSort: true, 
	
	//<span class="showClew"> 设置igrid列为服务端排序，默认为false，<span>当allowSort: true时有效</span></span>
	remoteSort: true,
	
	//<span class="showClew"> 设置igrid的列允许大小设置，可进行列的拖拽，默认true</span>
	allowResize: true, 
	
	//<span class="showClew"> 设置igrid显示分页信息，默认true</span>
	showPager: true,
	
	//<span class="showClew"> 设置igrid的单元格内容可进行折行显示，默认false</span>
	wrap: true, 
	
	//<span class="showClew"> 设置igrid的表头是否Tip信息，默认false</span>
	headTip: true, 
	
	//<span class="showClew"> 设置igrid的列宽进行百分比设置，默认为false</span>
	percentWidth: true,
	
	//<span class="showClew"> 设置igrid的列显示序号，默认为true</span>
	showSeq: true,
	
	//<span class="showClew"> 设置igrid的列显示连续序号，默认为true，<span>当showSeq: true时有效</span></span>
	serialSeq: true,

	//<span class="showClew"> 设置igrid的序号列为"NO."</span>
	seqHeader:"NO.",
	
	//<span class="showClew"> 设置igrid的序号列的宽度为"5%"</span>
	seqWidth:"5%",		
	
	//<span class="showClew"> 设置igrid翻页时竖向滚动条返回顶部，默认为true</span>
	autoScroll: true,
	
	//<span class="showClew"> igrid的列设置，详细参数说明请看《columns基本属性》</span>
 	columns: [
	 {field: 'name', width: "10%", customHeader: "&lt;a class='ccay-icon admin'>&lt;/a>"+ $i18n('ccay.common.label.name')},
	 {field: 'sex', width: "8%", header: "Sex", type: 'bool'},
	 {field: 'age', width: "8%", header: "Age", cssName: "center"},
	 {field: 'birthday', width: "12%", header: "Birthday", type: 'date'},
	 {field: 'tuition', width: "15%", header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
	 {field: 'mail', width: "20%", header: "Mail"},
	 {field: 'blog', width: "23%", header: "sBlog"}
 	],
 	//<span class="showClew"> 设置igrid的ajax请求参数，url属性获取数据源的链接地址</span>
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

//<span class="showClew"> 通过配置的igridOption参数进行igrid的初始化</span>
$("#igridDemo1").igrid(igridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <div title='columns基本属性' tabid='tab3'>
        <span class="showClew">备注：1、columns基本属性Demo展示了数据列的冻结列、不可改变宽度列、不可排序列、列的大小设置、显示分页信息
        <br>2、如果用户有Service$HtmlArea$read权限，则能看到7列数据，否则只能看到6列数据</span><br /><br />
	 	<div id="iStudent2"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html2'>&lt;div id="igridDemo2">&lt;/div></pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
var gridOption2 = {
	height: 332,
	wrap: true,
	
	//<span class="showClew"> 设置igrid允许开启冻结列，默认为true</span>
	allowFreezen: true,
	columns: [
	 //<span class="showClew"> field值为绑定的数据对象中的属性名称；width值为列宽度；header值为列头名称，自动进行国际化解析</span>
	 {field: 'name', width: 80, header: "ccay.common.label.name"}, 
	 
	 //<span class="showClew"> type值为显示的类型；sortable值为该列不进行排序</span>
	 {field: 'sex', width: 70, header: "Sex", type: 'bool', sortable: false},
	 
	 //<span class="showClew"> cssName值为单元格样式；sort值为排序顺序；resizable值为该列不允许改变列大小</span>
	 {field: 'age', width: 70, header: "Age", cssName: "center", sort: 'desc', resizable: false},
	 
	 //<span class="showClew"> freezeable值为该列是冻结列，<span>当allowFreezen:true时有效</span></span>
	 {field: 'birthday', width: 90, header: "Birthday", type: 'date',freezeable: true}, 
	 
	 //<span class="showClew"> format值为数据格式化配置</span>
	 {field: 'tuition', width: 130, header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
	 
	 //<span class="showClew"> showTip值为显示tip数据；permission值为该列的权限，有权限则会显示该列，否则隐藏该列</span>
	 {field: 'mail', width: 170, header: "Mail(有权限才能看到我哦！)", showTip: true, permission: "Service$HtmlArea$read"},
	 
	 //<span class="showClew"> content值为显示的内容</span>
	 {field: 'blog', width: 170, header: "Blog", content: "&lt;a href='${blog}'>${blog}&lt;/a>"}
	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo2").igrid(gridOption2);     		
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>	 
	 </div>
	 
	 <div title='单选&多选&点击行即勾选' tabid='tab4'>
        <span class="showClew">备注：IGrid单选or多选Demo显示了IGrid进行单项选择和多项选择的展示
        <br>1、单选：设置columns的<font color="red">columnType:'select'和multi:false</font>
        <br>2、多选：设置columns的<font color="red">columnType:'select'和multi:true</font></span><br><br>
	 	<h2>单选和多选:</h2>
	 	<div style="width: 100%; height: 415px; float: left;">
	 		<div id="iStudent3" style="width:49%; float: left;"></div>
	 		<div id="iStudent4" style="width:49%; float: right;"></div>
	 	</div>
	 	<h2>点击即勾选：设置op中的<font color="red">clickRow2Check：true</font>，即可点击行时，选中该行数据:</h2>
	 	<div style="width: 100%; height: 415px; float: left;">
	 		<div id="iStudent31" style="width:49%; float: left;"></div>
	 		<div id="iStudent41" style="width:49%; float: right;"></div>
	 	</div>
	 	<h2>点击即勾选：TreeGrid</h2>
	 	<div style="width: 100%; height: 415px; float: left;">
	 		<div id="iStudent311" style="width:49%; float: left;"></div>
	 		<div id="iStudent411" style="width:49%; float: right;"></div>
	 	</div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html3'>&lt;div id="igridDemo3">&lt;/div></pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js3'>
var gridOption3 = {
	clickRow2Check:true,//<span class="showClew">点击行即勾选</span>
	columns: [
		//<span class="showClew"> columnType:'select'设置该列显示选择框样式，可进行选择功能；multi: false为单选框；multi: true为多选框</span>
 		{columnType: 'select', multi: false},
		{field: 'name', width: 70, header: "ccay.common.label.name"},
		{field: 'birthday', width: 100, header: "Birthday", type: 'date'},
		{field: 'blog', width: 170, header: "Blog"}
	],
	ajax:{
		url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo3").igrid(gridOption3);      		
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>	 
	 </div>
	 
	 <div title='自定义表头' tabid='tab5'>
        <span class="showClew">备注：IGrid自定义表头Demo显示了表头的分类以及合并的样式</span><br><br>
	 	<table id='customHead' style='display:none'>
			<tr>
				<td field='Seq' rowspan="2"></td>
				<td field='mulitSelect' rowspan="2"></td>
				<td field='name' rowspan="2"></td>
				<td colspan="3">Description</td>
				<td colspan="2">Relation</td>
				<td field='lastUpdateDate' rowspan="2"></td>
			</tr>
			<tr>
				<td field='sex'></td>
				<td field='age'></td>
				<td field='birthday'><div><a class='ccay-icon view'/></div></td>
				<td field='mail'></td>
				<td field='blog'><div><a class='ccay-icon link'/></div></td>
			</tr>
		</table>
	 	<div id="iStudent5"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html4'>
&lt;!-- 自定义表头的HTML，必须是不可见的 -->
&lt;table id='customHead1' style='display:none'>
	&lt;tr>
		&lt;!-- field设置列头所对应的列，其值对应columns的field值，Seq序号列 -->
		&lt;td field='Seq' rowspan="2">&lt;/td>
		&lt;td field='name' rowspan="2">&lt;/td>
		&lt;td colspan="3">Description&lt;/td>
		&lt;td colspan="2">Relation&lt;/td>
		&lt;td field='lastUpdateDate' rowspan="2">&lt;/td>
	&lt;/tr>
	&lt;tr>
		&lt;td field='sex'>&lt;/td>
		&lt;td field='age'>&lt;/td>
		
		&lt;!-- 可自定义列头的样式 -->
		&lt;td field='birthday'>&lt;div>&lt;a class='ccay-icon view'/>&lt;/div>&lt;/td>
		&lt;td field='mail'>&lt;/td>
		&lt;td field='blog'>&lt;div>&lt;a class='ccay-icon link'/>&lt;/div>&lt;/td>
	&lt;/tr>
&lt;/table>
&lt;div id="igridDemo4">&lt;/div>
			</pre>
		</div>
		<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js4'>
var gridOption4 = {
	height: 363,
	wrap: true,
	
	//<span class="showClew"> 设置igrid进行自定义表头的div的id值。其值前加#号</span>
	customHead: '#customHead1',
	allowFreezen: true,
	columns: [
 		{field: 'name', width:90, header: "ccay.common.label.name", freezeable:true},
 		{field: 'sex', width:70, header: "sSex", type: 'bool', format: {isIcon: true}},
 		{field: 'age', width:70, header: "sAge", type: 'integer'},
 		{field: 'birthday', width:110, header: "sBirthday", type: 'date'},
 		{field: 'mail', width:130, header: "sMail"},
 		{field: 'blog', width:200, header: "sBlog"},
 		{field: 'lastUpdateDate', width:130, header: "ccay.common.label.lastUpdatedDate", type: 'datetime'}
	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};
		
$("#igridDemo4").igrid(gridOption4);      		
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js4').html(),$('#html4').html())">亲自试一试</a>
		</div>	 
	 </div>
	 
	 <!-- 超出显示Tip -->
	  <div title='内容超出显示Tip' tabid='tab10'>
	 	<span class="showClew">备注：IGrid基础属性Demo只进行简单的数据展示、显示分页信息、排序、改变列宽以及单元格内容折行显示</span><br /><br />
	 	<div id="iStudent6"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html6'><span class="showClew">&lt;!-- 提供div供igrid进行初始化 --></span>
&lt;div id="igridDemo6">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js6'>
//<span class="showClew"> 配置igrid的参数</span>
var igridOption = {
	height: 332,
	editMode:true,
	showPager: true,
	showSeq: true,
	serialSeq: true,
	//<span class="showClew"> igrid内容超出时显示Tip设置</span>
	showOverflow: true,
 	columns: [
 	 //<span class="showClew"> 列设置showTip:true</span>
	 {field: 'name', width: 100, customHeader: "&lt;a class='ccay-icon admin'>&lt;/a>"+ $i18n('ccay.common.label.name'),showTip:true},
	 {field: 'sex', width: 100, header: "Sex", type: 'bool'},
	 {field: 'age', width: 100, header: "Age", cssName: "center"},
	 {field: 'birthday', width: 100, header: "Birthday", type: 'date'},
	 {field: 'tuition', width: 100, header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
	 {field: 'mail', width: 100, header: "Mail"},
	 {field: 'blog', width: 100, header: "sBlog",showTip:true}
 	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};
$("#igridDemo6").igrid(igridOption);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js6').html(),$('#html6').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <!-- Igrid统计 -->
	  <div title='Igrid统计&指定区域loading' tabid='tab11'>
	 	<span class="showClew">备注：IGrid基础属性Demo只进行简单的数据展示、显示分页信息、排序、改变列宽以及单元格内容折行显示</span><br /><br />
	 	<input type="button" class="i18n" i18nKey="指定区域loading测试" onclick="$('#iStudent7').manager().reload(true,true)"/>
	 	<div style="height:10px;"></div>
	 	<div id="iStudent7"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
			<pre id='html7'><span class="showClew">&lt;!-- 提供div供igrid进行初始化 --></span>
&lt;div id="igridDemo7">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js7'>
//<span class="showClew"> 配置igrid的参数</span>
var igridOption7 = {
	height: 332,
	editMode:true,
	showPager: true,
	showSeq: true,
	serialSeq: true,
	//<span class="showClew"> igrid设置统计行序号列的显示文本</span>
	totalText: "合计",
 	columns: [
 	//<span class="showClew"> 优化统计列，取字符串第一个数值统计:11a3 ->11 ;as12ad2  ->12; asd -> 0 </span>
	 {field: 'name', width: 100, customHeader: "&lt;a class='ccay-icon admin'>&lt;/a>"+ $i18n('ccay.common.label.name'),totalCount:true},
	 {field: 'sex', width: 100, header: "Sex", type: 'bool'},
	 //<span class="showClew"> 列设置totalCount:true,表示统计该列。</span>
	 {field: 'age', width: 100, header: "Age", cssName: "center",totalCount:true},
	 {field: 'birthday', width: 100, header: "Birthday", type: 'date'},
	 {field: 'tuition', width: 100, header: "Tuition", type: 'rate', format: {htmlView: true, section: [20, 40, 80]}},
	 {field: 'mail', width: 100, header: "Mail"},
	 {field: 'blog', width: 100, header: "sBlog",showTip:true}
 	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}',
	   	//<span class="showClew">参数ui：指定区域loading</span>
	   	ui:"#igridDemo7"
	}
};
$("#igridDemo7").igrid(igridOption7);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#baseFunctionDemo',$('#js7').html(),$('#html7').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:50px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	 
</div>